<template>
	<view class="box">
		
		<view class="head flex-no-horizontal">
			
			<view class="head-left">
				
				<view class="head-name-gender flex-no-horizontal">
					<view class="name">
						{{userInfo.nickname}}
					</view>
					<view class="gender">
						<u-icon :name="userInfo.sex === 1 ? 'man' : 'woman'" :color="userInfo.sex === 1 ? '#2979ff' : '#fab6b6'" size="28" v-if="userInfo.sex < 2"></u-icon>
					</view>
					<view class="status-img" v-if="userInfo.vimg">
						<image :src="userInfo.vimg"></image>
					</view>
				</view>
				
				<view class="head-autograph">
					{{userInfo.sign}}
				</view>
				
			</view>
			
			<view class="head-right">
				<image :src="userInfo.avatar" mode="aspectFill"></image>
				<!-- <view class="gender" style="top: 0;" v-if="userInfo.vimg">
					<image :src="userInfo.vimg"  mode="" style="width: 30rpx;height: 30rpx;"></image>
				</view> -->
			</view>
			
		</view>
		
		<view class="main">
			
			<view class="main-top">
				
				<view class="main-user-number">
					居民卡编号:
					<text>{{userInfo.code}}</text>
				</view>
				
				<!-- <view class="main-user-number main-user-hash-address">
					区块链地址:
					<text>{{userInfo.blockchainAddr}}</text>
				</view> -->
				
			</view>
			
			<view class="main-bottom flex-no-horizontal">
				
				<view class="main-bottom-item">
					{{userRelation.following}}
					<text>关注</text>
				</view>
				<view class="main-bottom-item">
					{{userRelation.follower}}
					<text>粉丝</text>
				</view>
				<view class="main-bottom-item">
					{{userRelation.likeNum}}
					<text>点赞</text>
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		props:{
			userInfo: {
				type: Object,
				default () {
					return {};
				}
			},
			userRelation:{
				type: Object,
				default () {
					return {};
				}
			}
		},
		data() {
			return {
				
			};
		},
		computed: {
			
		},
		onLoad() {
			
		},
		methods: {
			
		},
	};
</script>

<style lang="scss">
	
	.box{
		
		.head{
			justify-content: space-between;
			.head-left{
				width: calc(100% - 200rpx);
				.head-name-gender{
					margin-bottom: 40rpx;
					.name{
						max-width: 65%;
						color: $uni-color-black;
						font-size: 40rpx;
						font-weight: bold;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					
					.gender{
						margin-left:20rpx;
					}
					
					.status-img{
						width: 30rpx;
						height: 30rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					
				}
				
				.head-autograph{
					color: rgba(143, 144, 145, 1);
					font-size: $uni-font-size-sm;
					word-break: break-word;
				}
				
			}
			
			.head-right{
				width: 180rpx;
				position: relative;
				image{
					width: 180rpx;
					height: 180rpx;
					border-radius: $uni-border-radius-circle;
				}
				.gender {
					width: 42rpx;
					height: 42rpx;
					background: #E5EDF2;
					border: 2rpx solid #FFFFFF;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					bottom: 0;
					right: 0;
				
					&>image {
						width: 22rpx;
						height: 22rpx;
				
					}
				}
				
			}
			
		}
		
		.main{
			width: 100%;
			// height: 256rpx;
			
			.main-top{
				padding: 53rpx 30rpx 0 30rpx;
				
				.main-user-number{
					color: rgba(143, 144, 145, 1);
					font-size: $uni-font-size-sm;
					
					text{
						color: $uni-color-black;
						margin-left: 10rpx;
					}
				}
				.main-user-hash-address{
					margin-top: 22rpx;
					border-bottom: 1rpx solid #F0F0F0;
					padding-bottom: 44rpx;
				}
				
				
			}
			
			.main-bottom{
				
				padding: 30rpx 60rpx;
				justify-content: space-between;
				
				.main-bottom-item{
					color: $uni-color-black;
					font-size: $uni-font-size-lg;
					
					text{
						color: rgba(143, 144, 145, 1);
						font-size: $uni-font-size-sm;
						margin-left: 10rpx;
					}
					
				}
				
			}
			
		}
		
	}

</style>